

/*===========================
     08.TESTIMONIAL css 
===========================*/




.single-testimonial{
    background-color: $white;
    @include box-shadow (0px 0px 30px 0px rgba(167,167,167,0.16));
    overflow: hidden;
    border-radius: 10px;
    padding: 25px 30px 5px;
    border-radius: 10px;
    border: 2px solid transparent;
    margin: 30px 0;
    @include transition(0.3s);
    
    @media #{$xs}{
        padding: 20px 20px 5px;
    }
    
    & .testimonial-review{
        & .quota{
            & i{
                font-size: 36px;
                color: #119BD2;
                @include transition(0.3s);
            }
        }
        & .star{
            & ul{
                & li{
                    display: inline-block;
                    font-size: 16px;
                    color: #FE806D;
                }
            }
        }
    }
    
    & .testimonial-text{
        margin-top: 25px;
        
        & .text{}
    }
    
    & .testimonial-author{
        margin-top: 30px;
        
        & .author-image{
            position: relative;
            
            & .shape{
                
            }
            & .author{
                position: absolute;
                top: 17px;
                left: 17px;
                width: 80px;
                height: 80px;
            }
        }
        & .author-content{
            & .holder-name{
                font-size: 18px;
                font-weight: 700;
                color: $black;
            }
            & .text{
                font-size: 15px;
            }
        }
    }
    
    &:hover{
        border-color: #FE7A7B;
        
        & .testimonial-review{
            & .quota{
                & i{
                    color: #FE7A7B;
                }
            }
        }
    }
}


.slick-center{
    .single-testimonial{
        border-color: #FE7A7B;
        
        & .testimonial-review{
            & .quota{
                & i{
                    color: #FE7A7B;
                }
            }
        }
    }
}


.testimonial-active{
    & .slick-dots{
        margin: 0 auto;
        
        & li{
            display: inline-block;
            margin: 0 4px;
            
            & button{
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: linear-gradient(180deg, rgba(254,132,100,1) 0%, rgba(254,110,154,1) 100%);
                border: 0;
                font-size: 0;
                opacity: 0.5;
                @include transition(0.3s);
            }
            
            &.slick-active{
                & button{
                    opacity: 1;
                    width: 15px;
                    height: 15px;
                }
            }
        }
    }
}







